<template>
	<view class="warp">
		<view class="example-body">
			<uni-grid :column="4" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in list" :key="index">
					<image :src="item.url" class="image" mode="aspectFill" />
					<text class="text">{{ item.text }}</text>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	
	var _this;
	export default {
		components: {
			uniGrid,
			uniGridItem
		},
		onLoad() {
			_this = this;
			//_this.$Common.init();
		},
		data() {
			return {
				list: [{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
						page: 'login',
						text: '登录'
					},
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
						page: 'course_bind',
						text: '扫码'
					},
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
						text: 'QQ'
					},
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-6.png',
						text: '抖音'
					},
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
						text: '百度'
					},
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
						text: '支付宝'
					},
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-9.png',
						text: '字节跳动'
					},
					{
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-4.png',
						text: '手机'
					}
				]
			}
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				let pageName = this.list[index].page
				let url = '../' + pageName + '/' + pageName;

				if (pageName)
					uni.navigateTo({
						url: url
					});

			}
		}
	}
</script>


<style>
	.example-body {
		border-top: 1px #f5f5f5 solid;
		padding: 30upx;
		background: #fff
	}

	.image {
		width: 50upx;
		height: 50upx;
	}

	.text {
		font-size: 26upx;
		margin-top: 10upx;
	}
</style>
